<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品结算</title>
</head>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script  th:src="@{/js/jquery-3.6.0.min.js}"></script>
<body>

<!--商品结算 需要从前端获取购物车List-->
<form id="orderForm1"  class="layui-form" method="post">
    <input name="orderInfos" type="hidden" id="orderInfos" th:value="${orderInfoStr}"/>
    <input name="allCost" id="allCost" type="hidden" th:value="${allCost}"/>
    <input name="address" type="hidden" id="address" onkeyup="value=value.replace(' ','')"/>

    <button type="button" style="display: none" id="submitOrder2" lay-submit lay-filter="orderForm1">提交表单</button>

</form>



<div style="height: 90%;position: absolute; top: 20px">


    <div style="height: 80%;width: 750px;border: solid lightgray 3px;align-items: center;margin-left: 35%">
        <div th:each="c:${cars}" style="display: flex;justify-content: space-between;border-bottom: solid lightgray 1px;padding-top: 1px">

            <div >
                <img th:src="@{${c.goods.icon}}" style="height: 100px;width:168px">
            </div>

            <div th:text="${c.goods.name}" style="width: 400px"></div>
            <div style="width: 170px">
                <div>单价:<span th:text="${c.goods.price}"></span></div>
                <div>数量<span th:text="${c.count}"></span></div>
            </div>

            <div style="width: 100px">总价:<span th:text="${c.goods.price*c.count}" style="font-weight: bold"></span></div>


        </div>
        <div style="text-align: center;border-top: solid lightgray 1px;border-bottom: solid lightgray 1px">共<span style="color: orangered" th:text="${#lists.size(cars)}"></span>件</div>
        <span>收货地址</span>
        <button class="layui-btn  layui-btn-normal layui-btn-xs" id="addressChange"><i class="layui-icon layui-icon-edit"></i></button>
<!--        <div th:each="a:${address}">-->
<!--            <div th:if="${a.moren}=='是'" th:text="${a.province+a.city+a.county+a.detail+a.comment}" style="width:750px;border-bottom: solid lightgray 1px"></div>-->
<!--        </div>-->




            <div id="currentAddress">



            </div>


        <div style="text-align: right">实付金额<span style="color:orangered;" th:text="${allCost}"></span></div>
    </div>
    <button type="button" id="submitOrder" style="height: 10%;width:756px;margin-left: 35%;color: white;background: orangered">提交订单</button>
</div>


<div style="display: none" id="addressSelect">
    <div  th:each="a:${address}" style="justify-content: space-between;display: flex;padding: 5px">
        <div>
            <span th:text="${a.province}"></span>
            <span th:text="${a.city}"></span>
            <span th:text="${a.county}"></span>
            <span th:text="${a.detail}"></span>
            <span th:text="${a.comment}"></span>
        </div>

        <div>
            <input type="radio" name="address" th:value="${a.ano}" th:id="'addressRadio-'+${a.ano}">

        </div>
    </div>
</div>
<script th:inline="javascript" type="text/javascript">
    $(function () {

        let currentmorenList=[[${address}]];
        for (x=0;x<currentmorenList.length;x++)
        {

            if(currentmorenList[x].moren=='是'){
                let currentAddress=$("#currentAddress");
                let currentAddressItem=$(" <div style='border-bottom: solid lightgray 1px'>\n" + currentmorenList[x].province+currentmorenList[x].city+currentmorenList[x].county+currentmorenList[x].detail+currentmorenList[x].comment+
                    "</div>")
                currentAddress.empty();
                currentAddress.append(currentAddressItem)
            }
        }


        layui.use(['table', 'form', 'layer'], function () {
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;


            $("#submitOrder").click(function (){

                $("#address").val($("#currentAddress").text())
                $("#submitOrder2").click();
            })

            $('#addressChange').click(function (){

                layer.open({
                    type: 1,
                    btn: ['提交','取消'],
                    skin: 'layui-layer-lan',
                    area: '500px',
                    title: '更换地址',
                    content: $("#addressSelect"),
                    yes: function (index, layero){

                        $("[id^=addressRadio-]").each(function (){
                            if(this.checked){

                                let id=this.id.split('-')[1];

                                $.ajax({
                                    url: '/buyer/center/addressByAno/'+id,
                                    type: "post",
                                    success: function(res){
                                        if(res.res){
                                            let currentAddress=$("#currentAddress");
                                            let currentAddressItem=$(" <div style='border-bottom: solid lightgray 1px'>\n" + res.data.province+res.data.city+res.data.county+res.data.detail+res.data.comment+
                                                     "</div>")
                                            currentAddress.empty();
                                            currentAddress.append(currentAddressItem)
                                        }
                                    },
                                })//ajax



                            }
                        })
                        layer.close(index);


                    },btn2: function (){
                        //取消按钮回调
                    },end: function (){
                        //窗口关闭回调
                    }
                });
            })

            form.on('submit(orderForm1)',function(data){


                console.log(data.elem);
                console.log(data.form);
                console.log(data.field);


                let formData =new FormData(data.form);


                // th:action="@{/buyer/orders/insert}"

                $.ajax({
                    url: '/buyer/order/insert',
                    contentType: false,
                    data: formData,
                    dataType: 'json',
                    processData: false,


                    success: function(res){
                        if(res.res){
                            layer.msg(res.msg,{time: 2000},function (){
                                location.href='/buyer/shopcar/shopcarList'
                            })

                        }
                        else{
                            layer.msg(res.msg)
                        }
                    },

                    type: 'post',
                })


            })

            // $("#submitOrder").click(function () {
            //     $("#orderForm1").submit();
            // })

        })
    })
</script>





</body>
</html>